import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const QuillEditor = () => {
    const modules = {
        toolbar: [
            [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
            [{size: []}],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{'list': 'ordered'}, {'list': 'bullet'},
                {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image', 'video', 'code-block'],
            ['clean']
        ],
        clipboard: {
            // 控制剪贴板的行为
        },
        syntax: true,
    };

    const formats = [
        'header', 'font', 'size',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'link', 'image', 'video', 'code-block'
    ];

    const [text, setText] = useState('');

    const handleChange = (value) => {
        setText(value);
    };

    return (
        <div>
            <ReactQuill
                value={text}
                onChange={handleChange}
                modules={modules}
                formats={formats}
            />
        </div>
    );
};

export default QuillEditor;
